﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <title>Dragdealer JS</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="dragdealer.css" rel="stylesheet" type="text/css" />
    <script src="dragdealer.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="dragdealer-main.css" />
    <script type="text/javascript" src="dragdealer-main.js"></script>
</head>
<body class="small">
    <h1>
        Dragdealer JS</h1>
    <p class="subtitle">
        Drag provider – the good stuff</p>
    <p class="top-spaced">
        <strong>Dragdealer</strong> is a drag-based JavaScript component that embraces endless
        front-end solutions. Elegantly crafted for JavaScript-aware coders.</p>
    <p class="top-spaced">
        2D drag and tap, mouse and touch <small>(mobile tested)</small>, 12kB unminified.
        No dependency.</p>
    <p class="top-spaced">
        Take a look through all the demos below to understand how it works.</p>
    <ul class="items">
        <li>
            <h2>
                Download (or contribute)</h2>
            <ul class="units">
                <li class="big"><a href="http://code.google.com/p/dragdealer/" title="Google Code"><strong>
                    code.google.com</strong>/p/dragdealer/</a></li>
            </ul>
        </li>
        <li>
            <h2>
                Read more (or comment)</h2>
            <ul class="units">
                <li class="big"><a href="http://ovidiu.ch/dragdealer-js" title="Blog post"><strong>ovidiu.ch</strong>/dragdealer-js</a></li>
            </ul>
        </li>
        <li>
            <h2>
                Follow (or contact)</h2>
            <ul class="units">
                <li class="big"><a href="http://twitter.com/skidding" title="Twitter account"><strong>
                    twitter.com</strong>/skidding</a></li>
            </ul>
        </li>
        <li>
            <h2>
                HTML structure</h2>
            <pre class="code top-spaced">
&lt;div id="my-slider" class="dragdealer"&gt;
	&lt;div class="red-bar handle">drag me&lt;/div&gt;
&lt;/div&gt;
</pre>
            <p class="top-spaced">
                <small><em>red bar</em> is the default red bar-looking handle. It's a separate class
                    so you can easily remove it if you want your handle to be something completely different,
                    and not have to reset all its CSS properties.</small></p>
        </li>
        <li>
            <h2>
                JS API</h2>
            <ul class="items">
                <li>
                    <h3>
                        Constructor</h3>
                    <p class="top-spaced">
                        <em>Dragdealer</em> <strong>Dragdealer</strong>(<em>Mixed</em> <strong>wrapper</strong>
                        [, <em>Object</em> <strong>options</strong> ])</p>
                    <ul class="units top-spaced">
                        <li><em>Mixed</em> <strong>wrapper</strong> - This can be the HTML element's <strong>
                            id</strong>, or the actual <strong>element</strong> itself if you have it "at hand"</li>
                        <li><em>Object</em> <strong>options</strong></li>
                    </ul>
                </li>
                <li>
                    <h3>
                        Options</h3>
                    <ul class="units top-spaced">
                        <li><em>Boolean</em> <strong>disabled</strong> - Initial state; <small>default: false</small></li>
                        <li><em>Boolean</em> <strong>horizontal</strong> - Horizontal capability; <small>default:
                            true</small></li>
                        <li><em>Boolean</em> <strong>vertical</strong> - Vertical capability; <small>default:
                            false</small></li>
                        <li><em>Number</em> <strong>x</strong> - Initial horizontal value [0,1]; <small>default:
                            0</small></li>
                        <li><em>Number</em> <strong>y</strong> - Initial vertical value [0,1]; <small>default:
                            0</small></li>
                        <li><em>Boolean</em> <strong>slide</strong> - Sliding on drag release; <small>default:
                            true</small></li>
                        <li><em>Number</em> <strong>steps</strong> - Amount of steps to limit to (less than
                            2 means no steps); <small>default: 0</small></li>
                        <li><em>Boolean</em> <strong>snap</strong> - Snapping to steps (if set); <small>default:
                            false</small></li>
                        <li><em>Boolean</em> <strong>loose</strong> - Loose dragging; <small>default: false</small></li>
                        <li><em>Function</em> <strong>callback</strong> - (on release); <small>default: null</small></li>
                        <li><em>Function</em> <strong>animationCallback</strong> - (on move); <small>default:
                            null</small></li>
                        <li><em>Number</em> <strong>speed</strong> - Gliding speed of the handle (0, 100]; <small>
                            default: 10</small></li>
                        <li><em>Number</em> <strong>xPrecision</strong> - Width of the animated content; <small>
                            default: <em>wrapper</em> or <em>handle</em> width</small></li>
                        <li><em>Number</em> <strong>yPrecision</strong> - Height of the animated content; <small>
                            default: <em>wrapper</em> or <em>handle</em> height</small></li>
                        <li><em>Number</em> <strong>top</strong>, <strong>bottom</strong>, <strong>left</strong>,
                            <strong>right</strong> - Wrapper padding; <small>default: 0</small></li>
                    </ul>
                </li>
                <li>
                    <h3>
                        Methods</h3>
                    <ul class="units top-spaced">
                        <li><strong>enable</strong>() - Enable user interaction</li>
                        <li><strong>disable</strong>() - Disable user interaction</li>
                        <li><strong>setValue</strong>(<em>Number</em> <strong>x</strong> [, <em>Number</em>
                            <strong>y</strong> [, <em>Boolean</em> <strong>snap</strong> = false ]]) - Set the
                            specified values, with the ability to slide or to snap directly</li>
                        <li><strong>setStep</strong>(<em>Number</em> <strong>x</strong> [, <em>Number</em> <strong>
                            y</strong> [, <em>Boolean</em> <strong>snap</strong> = false ]]) - Set the values
                            to the specified steps (if set), with the ability to slide or to snap directly</li>
                    </ul>
                </li>
                <li>
                    <h3>
                        Callback</h3>
                    <p class="top-spaced">
                        <em>Function</em> (<em>Number</em> <strong>x</strong>, <em>Number</em> <strong>y</strong>)</p>
                    <ul class="units top-spaced">
                        <li><em>Number</em> <strong>x</strong> - Horizontal value</li>
                        <li><em>Number</em> <strong>y</strong> - Vertical value</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <h2>
                Demos</h2>
            <ul>
                <li>
                    <h3>
                        Simple slider</h3>
                    <p class="top-spaced">
                        No-options slider. Does nothing, but slide, of course. Slide the red handle by <strong>
                            dragging</strong> or <strong>tapping</strong> (and hold) outside it, on its
                        rail.</p>
                    <pre class="top-spaced code">
new Dragdealer('simple-slider');
</pre>
                    <div class="top-spaced">
                        <div id="simple-slider" class="dragdealer rounded-cornered">
                            <div class="red-bar handle">
                                drag me</div>
                        </div>
                    </div>
                </li>
                <li>
                    <h3>
                        Scroll-bar</h3>
                    <p class="top-spaced">
                        A quick <strong>vertical</strong> example. Uses the <strong>animation callback</strong>
                        to scroll a clipped content and has the <strong>yPrecision</strong> set to its height.</p>
                    <p class="top-spaced">
                        <small>yPrecision provides a proper smooth slide, since the animated content is higher
                            than the slider.</small></p>
                    <pre class="top-spaced code">
new Dragdealer('scroll-bar',
{
	horizontal: false,
	vertical: true,
	yPrecision: content.offsetHeight,
	animationCallback: function(x, y)
	{
		var margin = y * (content.offsetHeight - mask.offsetHeight);
		content.style.marginTop = String(-margin) + 'px';
	}
});
</pre>
                    <div class="top-spaced right-float">
                        <div id="scroll-bar" class="dragdealer rounded-cornered">
                            <div class="red-bar handle">
                            </div>
                        </div>
                    </div>
                    <div id="scroll-mask" class="top-spaced rounded-cornered">
                        <div id="scroll-content">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut lorem diam, at
                                tincidunt libero. Integer sodales nulla a turpis pulvinar vel aliquet sem laoreet.
                                Sed imperdiet nunc et metus dapibus suscipit. Fusce suscipit ultricies nisl laoreet
                                scelerisque. In lectus lorem, rutrum sed blandit sed, tincidunt eget libero. Quisque
                                at orci eget ligula iaculis eleifend vitae at quam. Donec molestie facilisis dolor,
                                ut viverra lacus hendrerit id. Sed in arcu sed eros iaculis faucibus. Aenean iaculis
                                pharetra nisl nec ultrices. Nulla nec libero nec ante pharetra pharetra ac non dui.
                                Donec id laoreet enim. Phasellus id metus sapien.</p>
                            <p class="top-spaced">
                                Curabitur malesuada ante nec tellus suscipit rutrum a at lorem. Cum sociis natoque
                                penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eu est
                                nibh. Pellentesque id magna sapien, at rhoncus neque. In aliquam, justo id lobortis
                                mollis, ligula mi porttitor massa, id condimentum ipsum magna et sem. Nulla semper
                                nulla eu nunc consectetur at egestas ligula vulputate. Proin aliquam porttitor ultrices.
                                Donec sodales, lectus id commodo cursus, arcu nibh molestie risus, nec convallis
                                massa mi in velit. Nam condimentum luctus augue a malesuada. Phasellus hendrerit
                                interdum mattis. Etiam dolor nibh, convallis sed ultricies nec, imperdiet sed nibh.
                                Morbi magna nibh, aliquet et fermentum eu, tempor id eros. Praesent pharetra malesuada
                                sem ac egestas.</p>
                            <p class="top-spaced">
                                Donec ut leo elit. Duis vitae fermentum elit. Pellentesque pulvinar, nunc vel pharetra
                                porttitor, ipsum risus mattis nunc, tempor malesuada nulla felis fringilla leo.
                                Curabitur rhoncus enim vitae nibh imperdiet in varius erat dapibus. Sed fringilla
                                mi lorem. Curabitur at sapien diam, id mollis nulla. Donec laoreet placerat felis.
                                Nulla facilisi. Mauris eu nulla ac sem facilisis commodo. Ut ligula nisi, tempus
                                tincidunt tristique vel, cursus a nibh. Nulla cursus pulvinar libero, in blandit
                                est porta in. Duis elementum metus in augue auctor mattis. Aenean sit amet placerat
                                purus. Praesent nec felis vitae tortor sodales pretium ac sed nulla. Suspendisse
                                sit amet sem id metus porttitor bibendum a sed lectus. In sit amet erat leo. Nam
                                pharetra luctus ullamcorper. Nullam semper velit et orci rhoncus vel pellentesque
                                lacus hendrerit.</p>
                            <p class="top-spaced">
                                Vivamus ultrices metus non nunc venenatis ac feugiat ipsum porta. Integer porttitor
                                tincidunt imperdiet. Sed consequat, dolor ac luctus mattis, arcu enim scelerisque
                                risus, ut aliquet urna lacus ac sapien. Vestibulum pharetra lectus quis sapien ultricies
                                nec placerat augue varius. Nunc suscipit accumsan neque faucibus tincidunt. Nam
                                consequat interdum leo, nec vehicula velit scelerisque eget. Etiam mattis rutrum
                                massa, et ullamcorper arcu iaculis id. Morbi eget ipsum non justo accumsan auctor
                                eu in ligula. Integer imperdiet venenatis augue, at imperdiet metus pharetra vel.
                                Proin augue urna, bibendum at pretium vitae, vestibulum nec velit. Nam sed justo
                                gravida ante ullamcorper blandit vitae nec nisl. Nam ligula purus, eleifend at dictum
                                sit amet, congue posuere turpis. Sed dui urna, venenatis in sodales imperdiet, malesuada
                                ac turpis. Pellentesque nec rhoncus elit. Quisque condimentum iaculis arcu, vitae
                                consequat purus adipiscing ut. Aliquam placerat felis eu ipsum venenatis consequat.
                                Fusce pellentesque orci et orci malesuada sit amet mattis justo gravida.</p>
                            <p class="top-spaced">
                                Proin malesuada, orci non vehicula convallis, libero magna ullamcorper nisl, in
                                euismod odio nisl eu mauris. Mauris sed suscipit nisi. Ut sed dui lectus. Vivamus
                                rhoncus porta ornare. Pellentesque nec tincidunt dolor. Nullam ornare purus venenatis
                                ipsum placerat eu sollicitudin mauris porttitor. Proin sit amet leo at nibh fermentum
                                pharetra. Fusce euismod sapien vel odio ultricies venenatis facilisis massa consectetur.
                                Aenean pulvinar ornare elementum. Sed ante purus, viverra eget accumsan ac, euismod
                                non nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
                                inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia
                                nostra, per inceptos himenaeos. Pellentesque habitant morbi tristique senectus et
                                netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis
                                dis parturient montes, nascetur ridiculus mus.</p>
                        </div>
                    </div>
                    <p class="top-spaced">
                        <small>Please note that this is not may not the most complex scroll-bar implementation,
                            but rather a simple one. You could enhance it, but that's not the purpose of this
                            demos.</small></p>
                </li>
                <li>
                    <h3>
                        Magnifier</h3>
                    <p class="top-spaced">
                        Controlling is one of the things Dragdealer does best. It's using a block of text
                        here, even though it could have just as easily been an image or something more exciting.
                        Also <strong>snapping</strong> is in action, with the <strong>steps</strong> set
                        to 6. We're snapping to steps for the sake of the demonstration, but using steps
                        without snapping is even cooler; you'll see that in the next examples.</p>
                    <pre class="top-spaced code">
new Dragdealer('magnifier',
{
	steps: 6,
	snap: true,
	animationCallback: function(x, y)
	{
		text.style.fontSize = String(12 + x * 24) + 'px';
	}
});
</pre>
                    <div class="top-spaced">
                        <div id="magnifier" class="dragdealer rounded-cornered">
                            <div class="red-bar handle">
                                drag me</div>
                        </div>
                    </div>
                    <p id="magnifying-text" class="top-spaced rounded-cornered">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut lorem diam, at
                        tincidunt libero. Integer sodales nulla a turpis pulvinar vel aliquet sem laoreet.</p>
                </li>
                <li>
                    <h3>
                        Slideshow w/ controls</h3>
                    <p class="top-spaced">
                        This example is a bit more complex implementation. On the left there is the actual
                        Dragdealer element, which is populated with four photos that you can drag horizontally.
                        They are clipped by the component wrapper, which in this case is actually smaller
                        than the handle content itself, exactly as wide as each of the contained photos,
                        which results in a carousel effect.</p>
                    <p class="top-spaced">
                        On the right there are four links that <strong>control</strong> the component, and
                        practically link to a corresponding image.</p>
                    <p class="top-spaced">
                        And to top it, I've also added a cursor to the controls on the right, which is positionated
                        through the <strong>animation callback</strong>, offering feedback on both ways.</p>
                    <pre class="top-spaced code">
#slideshow {
	<strong>overflow: hidden;</strong>
...
</pre>
                    <pre class="top-spaced code">
var slideshow = new Dragdealer('slideshow',
{
	steps: 4,
	loose: true,
	animationCallback: function(x, y)
	{
		var top = x * (menuWrapper.offsetHeight - cursor.offsetHeight);
		cursor.style.top = String(top) + 'px';
	}
});
</pre>
                    <pre class="top-spaced code">
link1.onclick = function()
{
	slideshow.setStep(1);
	return false;
}
link2.onclick = function()
{
	slideshow.setStep(2);
	return false;
}
link3.onclick = function()
{
	slideshow.setStep(3);
	return false;
}
link4.onclick = function()
{
	slideshow.setStep(4);
	return false;
}
</pre>
                    <div id="slideshow-menu-wrapper" class="top-spaced right-float">
                        <div id="slideshow-menu-cursor" class="cursor">
                        </div>
                        <ul id="slideshow-menu">
                            <li><a id="slideshow-photo-1" href="#photo1"><span class="title">Lorem</span> <span
                                class="description">Lorem ipsum dolor sit.</span> </a></li>
                            <li><a id="slideshow-photo-2" href="#photo2"><span class="title">Ipsum</span> <span
                                class="description">Lorem ipsum dolor sit.</span> </a></li>
                            <li><a id="slideshow-photo-3" href="#photo3"><span class="title">Dolor</span> <span
                                class="description">Lorem ipsum dolor sit.</span> </a></li>
                            <li><a id="slideshow-photo-4" href="#photo4"><span class="title">Sit amet</span> <span
                                class="description">Lorem ipsum dolor sit.</span> </a></li>
                        </ul>
                    </div>
                    <div class="top-spaced">
                        <div id="slideshow" class="dragdealer">
                            <div class="handle">
                                <div class="slide img1">
                                </div>
                                <div class="slide img2">
                                </div>
                                <div class="slide img3">
                                </div>
                                <div class="slide img4">
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="top-spaced">
                        <small>Again, this is not a slideshow carousel <em>per se</em>, it's just an idea of
                            what you could build using Dragdealer. For example you could easily add an auto-rotate
                            functionality to this with 5 lines of code tops, but these are not solutions, just
                            examples.</small></p>
                </li>
                <li>
                    <h3>
                        Canvas mask</h3>
                    <p class="top-spaced">
                        Another advanced example, similar to the previous one, but on both dimensions. Another
                        thing to notice in both this and the previous demo is the <strong>loose</strong>
                        property. Check out the elastic ease applied when trying to drag outside the boundries.</p>
                    <pre class="top-spaced code">
#canvas-mask {
	<strong>overflow: hidden;</strong>
...
</pre>
                    <pre class="top-spaced code">
new Dragdealer('canvas-mask', { vertical: true, steps: 2, loose: true });
</pre>
                    <div class="top-spaced">
                        <div id="canvas-mask" class="dragdealer">
                            <div class="handle">
                                <div class="slide">
                                    <div class="bar">
                                        <span class="title">One big slide title</span> <span class="description">Lorem ipsum
                                            dolor sit amet. Lorem ipsum dolor sit amet.</span>
                                    </div>
                                </div>
                                <div class="slide">
                                    <div class="bar">
                                        <span class="title">2nd big slide title</span> <span class="description">Lorem ipsum
                                            dolor sit amet.</span>
                                    </div>
                                </div>
                                <div class="slide">
                                    <div class="bar">
                                        <span class="title">3rd big slide title</span> <span class="description">Lorem ipsum
                                            dolor sit amet.</span>
                                    </div>
                                </div>
                                <div class="slide">
                                    <div class="bar">
                                        <span class="title">Another big slide title</span> <span class="description">Lorem ipsum
                                            dolor sit amet.</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="top-spaced">
                        You could also have control links: <a id="canvas-slide-1" href="#slide1">Slide 1</a>
                        | <a id="canvas-slide-2" href="#slide2">Slide 2</a> | <a id="canvas-slide-3" href="#slide3">
                            Slide 3</a> | <a id="canvas-slide-4" href="#slide4">Slide 4</a>.</p>
                </li>
            </ul>
        </li>
    </ul>
    <p class="top-spaced">
        Thank you for you interest in coolness and I hope you have as much fun as possible!</p>
    <p class="top-spaced">
        &copy; 2010 . No idiot-proof guarantee.</p>
    <div class="analytics">
    </div>
</body>
</html>
